<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="订单编号" prop="salesNo">
        <el-input v-model="queryParams.salesNo" placeholder="请输入订单编号" :clearable="true" />
      </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户名称"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['order:sales_list']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['order:sales:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="salesOrder"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
      ref="tableRef"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['order:sales:update']"
        />
        <context-menu-item
          label="审核"
          @click="handleMenuCheck(row)"
          v-hasPermi="['order:sales:check']"
        />
        <context-menu-item
          label="取消"
          @click="handleMenuCancel(row)"
          v-hasPermi="['order:sales:cancel']"
        />
      </template>
    </Table>
  </ContentWrap>
  <salesOrderEdit ref="editRef" @success="getPage()" />
</template>
<script setup name="salesOrder" lang="ts">
import * as SalesApi from '@/api/order/sales'
import salesOrderEdit from './salesOrderEdit.vue'
import { getKeyList } from '@pureadmin/utils'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
const editRef = ref()
const tableRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  salesNo: undefined,
  customerName: undefined
})
const queryData = ref()
const columns = [
  {
    label: '订单编号',
    prop: 'salesNo'
  },
  {
    label: '客户编号',
    prop: 'customer.customerNo'
  },
  {
    label: '客户名称',
    prop: 'customer.name'
  },
  {
    label: '状态',
    prop: 'status',
    formatter: ({ status }) => getDictObj(DICT_TYPE.SALES_ORDER_STATUS, status).label
  },
  {
    label: '订单总金额',
    prop: 'totalAmount'
  },
  {
    label: '实付金额',
    prop: 'payAmount'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(() => {
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editRef.value.open(0, 'create')
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await SalesApi.pageQuery(queryParams.value)
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  editRef.value.open(row.id, 'update')
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editRef.value.open(row.id, 'update')
}

/** 处理右击事件 审核 */
const handleMenuCheck = async (row) => {
  const selectRows = getMultipleSelect(row)
  const rowIds: any[] = getKeyList(selectRows, 'id')
  await SalesApi.check({ ids: rowIds })
  getPage()
}

const getMultipleSelect = (row) => {
  let selectRows = tableRef.value.getTableRef().getSelectionRows()
  if (row != null && !selectRows.includes(row)) selectRows.push(row)
  return selectRows
}

/** 处理右击事件 取消 */
const handleMenuCancel = async (row) => {
  const selectRows = getMultipleSelect(row)
  const rowIds: any[] = getKeyList(selectRows, 'id')
  await SalesApi.cancel({ ids: rowIds })
  getPage()
}
</script>
